<template>
  <div class="contentContainer">
    <Title title="各模型日调用次数">
      <div class="tabs">
      <span :class="{active: current === 0}" @click="tabsHandler(0)">近七日</span>
      <span :class="{active: current === 1}" @click="tabsHandler(1)">近一月</span>
      </div>
    </Title>
    <div class="contentBox" id="rdycsChart">

    </div>
  </div>
</template>
<script>
import Title from './Title'
import echarts from 'echarts'

export default {
  name: '',
  props: {},
  components: {
    Title
  },
  data() {
    return {
      current: 0,

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.initChartMap()
  },
  methods: {
    tabsHandler(num) {
      this.current = num;
    },
    initChartMap() {
      let dom = document.getElementById('rdycsChart');
      var chart = echarts.init(dom, 'chalk')
      var option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '2%',
          top: '15%',
          containLabel: true,
        },
        legend: {
          right: '5%',
          top: '7%',
          textStyle: {
            fontSize: '12',
            color: '#333',
          },
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '07/12',
              '07/13',
              '07/14',
              '07/15',
              '07/16',
              '07/17',
              '07/18',
              '07/19',
              '07/20',
              '07/21',
              '07/22',
            ],
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              interval: 0,
              rotate: 30
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333',
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: '某远程机动安全⻛险评估模型',
            color: [
              '#5470c6',
            ],
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90,],
          },
          {
            name: '某器材接运安全⻛险评估模型',
            color: [
              '#dca526',
            ],
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234,],
          },
          {
            name: '某爆破作业安全⻛险评估模型',
            color: [
              '#e66',
            ],
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410, 232, 201, 154, 190],
          },
        ],
      }
      chart.setOption(option)
      // 监听屏幕变化自动缩放图表
      let observer = new ResizeObserver(function () {
        chart.resize();
      });
      observer.observe(dom)
    },
  },
}
</script>
<style lang="scss" scoped>
.contentContainer {
  height: 100%;
  padding: 10px 16px;
  box-sizing: border-box;

  .contentBox {
    height: calc(100% - 40px);
  }

  .tabs {
    width: 120px;
    height: 30px;
    border: 1px solid #409eff;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;

    span {
      width: 50%;
      display: block;
      line-height: 28px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      color: #409eff;
      float: left;

      &.active {
        color: #fff;
        background: #409eff;
      }
    }
  }
}
</style>
